// 统一的代码块样式
// 基于 md-editor-v3 的默认代码块样式，用于保持编辑器和展示页面的一致性

// 代码块变量定义
$code-bg-color: #f6f8fa;
$code-border-color: #e1e4e8;
$code-text-color: #333;
$inline-code-bg: rgb(175 184 193 / 20%);
$inline-code-color: #e74c3c;
$copy-btn-bg: rgb(255 255 255 / 80%);
$copy-btn-border: #d0d7de;
$copy-btn-hover-bg: #f3f4f6;
$copy-btn-success-bg: #67c23a;

// 基础代码样式
@mixin base-code-styles {
  // 内联代码样式
  code {
    padding: 2px 6px;
    margin: 0 2px;
    font-family:
      SFMono-Regular, "SF Mono", Monaco, Inconsolata, "Roboto Mono",
      "Source Code Pro", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.875em;
    font-weight: 500;
    line-height: 1.4;
    color: $inline-code-color;
    word-break: break-word;
    background-color: $inline-code-bg;
    border-radius: 4px;
  }

  // 代码块样式
  pre {
    position: relative;
    padding: 16px 20px;
    margin: 16px 0;
    overflow: auto;
    font-size: 14px;
    line-height: 1.6;
    background-color: $code-bg-color;
    border: 1px solid $code-border-color;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 5%);

    // 代码块内的代码元素
    code {
      padding: 0;
      margin: 0;
      font-size: inherit;
      font-weight: normal;
      line-height: inherit;
      color: $code-text-color;
      word-break: normal;
      overflow-wrap: normal;
      white-space: pre;
      background-color: transparent;
      border-radius: 0;
    }

    // 滚动条样式
    &::-webkit-scrollbar {
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 4px;

      &:hover {
        background: #a8a8a8;
      }
    }
  }

  // 复制按钮样式
  .copy-button {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    font-family:
      -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
      sans-serif;
    font-size: 12px;
    line-height: 1;
    color: #656d76;
    cursor: pointer;
    user-select: none;
    background-color: $copy-btn-bg;
    border: 1px solid $copy-btn-border;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;

    // 复制成功状态
    &.success {
      color: #fff;
      background-color: $copy-btn-success-bg;
      border-color: $copy-btn-success-bg;
    }

    &:hover {
      color: #24292f;
      background-color: $copy-btn-hover-bg;
      border-color: #afb8c1;
    }

    &:active {
      background-color: #e9ecef;
      transform: translateY(1px);
    }
  }
}

// 移动端适配混入
@mixin mobile-code-styles {
  code {
    padding: 1px 4px;
    font-size: 0.8em;
  }

  pre {
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 13px;
    border-radius: 6px;

    code {
      font-size: inherit;
    }
  }

  .copy-button {
    top: 6px;
    right: 6px;
    padding: 3px 6px;
    font-size: 11px;
  }
}

// 小屏设备适配混入
@mixin small-mobile-code-styles {
  code {
    font-size: 0.75em;
  }

  pre {
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 12px;

    code {
      font-size: inherit;
    }
  }

  .copy-button {
    padding: 2px 4px;
    font-size: 10px;
  }
}

// 语言标签样式（可选）
@mixin language-label-styles {
  pre {
    &[data-lang]::before {
      position: absolute;
      top: 8px;
      left: 16px;
      padding: 2px 6px;
      font-size: 11px;
      font-weight: 500;
      line-height: 1;
      color: #656d76;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      content: attr(data-lang);
      background-color: rgb(255 255 255 / 80%);
      border: 1px solid #d0d7de;
      border-radius: 4px;
    }

    // 当有语言标签时，调整复制按钮位置
    &[data-lang] .copy-button {
      top: 32px;
    }
  }
}

// 高亮行样式（可选）
@mixin highlight-line-styles {
  .highlight-line {
    padding-left: 13px;
    margin-left: -16px;
    background-color: rgb(255 235 59 / 10%);
    border-left: 3px solid #ffeb3b;
  }
}

// 默认导出样式类
.unified-code-blocks {
  @include base-code-styles;

  // 移动端适配
  @media screen and (width <= 767px) {
    @include mobile-code-styles;
  }

  // 小屏设备适配
  @media screen and (width <= 375px) {
    @include small-mobile-code-styles;
  }
}

// 独立的混入导出，供组件直接使用
.markdown-code-blocks {
  @include base-code-styles;

  // 移动端适配
  @media screen and (width <= 767px) {
    @include mobile-code-styles;
  }

  @media screen and (width <= 375px) {
    @include small-mobile-code-styles;
  }
}

// 暗色主题支持（可选）
@media (prefers-color-scheme: dark) {
  .unified-code-blocks,
  .markdown-code-blocks {
    code {
      color: #f47067;
      background-color: rgb(110 118 129 / 40%);
    }

    pre {
      color: #e6edf3;
      background-color: #161b22;
      border-color: #30363d;

      code {
        color: #e6edf3;
      }
    }

    .copy-button {
      color: #7d8590;
      background-color: rgb(13 17 23 / 80%);
      border-color: #30363d;

      &:hover {
        color: #c9d1d9;
        background-color: #21262d;
        border-color: #6e7681;
      }
    }
  }
}
